<template>
  <div class="box">
    <fou-dialog
      :title="'產品選擇'"
      :width="'75%'"
      v-model:dialogValue="productDialog"
    >
      <template #content>
        <el-button color="#081F42" :disabled="delsable" @click="choice(tabulation)">多選{{num}}</el-button>
        <ProTable
          :data="dataList"
          :column="column"
          :elProps="elProps"
          :page="page"
          :rowControl="[]"
          :disabled="[]"
          :controlWidth="controlWidth"
           @page-change="onPageChange"
           @pageRefresh="pageRefresh"
           @selection-change="onSelectionChange"
        >
      <template #default="{ row, propname }">
            <div v-if="propname === 'cate' || propname === 'pp' || propname === 'dw' || propname === 'gys' ">
                {{row[propname] && row[propname].name ? row[propname].name : row[propname]}}
            </div>
      </template>
          <template #search_operate>
            <el-table-column  fixed="right" min-width="200px" >
              <template #header>
                      <el-input @keyup.enter="getTableList" clearable v-model="search" placeholder="搜索(內容)" class="input">
                        <template #append>
                          <el-button icon="Search" @click="getTableList"></el-button>
                        </template>
                      </el-input>
              </template>
              <template #default="scope">
                <el-button  color="#081F42"  @click="handleSelect(scope.$index, scope.row)" >選擇</el-button >
              </template>
            </el-table-column>
          </template>
        </ProTable>
      </template>
    </fou-dialog>
  </div>
</template>

<script setup>
import { ref, watch,reactive } from "vue";
import { elProps, controlWidth } from "./index";
import {product } from "@/http/index.js";
import {loading,closeLoading} from '@/common/function.js'
const search = ref('')
const productDialog = ref(false);
const column = {
  number: "產品編號",
  name: "產品名稱",
  cate: "產品類別",
  dw: "產品單位",
  pp: "產品品牌",
  gys: "產品供應商",
  type: "產品型號",
  price: "價格",
  cost: "成本",
  //   discountprice:'產品折扣價',
  //   safety:"安全量",
  //   barcode:'條形碼',
  //   remark: "備註",
  //   introduce:'產品介紹',
};

const page = reactive({
  current_page: 1, //当前页
  per_page: 10, //每页条数
  total: 10, //总条数
  page_size: [10, 20, 30], //可选分页条数
});
const delsable = ref(true);
const num = ref(0)
const tabulation = ref([])
const onSelectionChange = (e) => {
  console.log(e);
  tabulation.value = e
  num.value = e.length
  delsable.value = e.length === 0;
};
const pageRefresh = async () => {
  obj.page = 1
  loading()
  await tableList();
  closeLoading()
};
const onPageChange = ({ e, type }) => {
  console.log(e, type);
  if (type == "current") {
    obj.page = e;
  }
  if (type == "size") {
    obj.page = 1
    obj.limit = e;
  }
    tableList()
};

const getTableList = (e)=>{
  console.log(search.value);
obj.name = search.value
tableList()
}
const emit = defineEmits(['update'])
const choice = (e)=>{
  console.log(e);
   emit('update',e)
   productDialog.value = false
}
const handleSelect = (index,row)=>{
    console.log(index,row)
    let data = [row]
    console.log(data);
     emit('update',data)
   productDialog.value = false
}
const obj = reactive({
  // school_id:localStorage.getItem('school_id'),
  page: page.current_page,
  limit: page.per_page,
  name: '',
  // status: "",
  // time: "",
});
const dataList = ref([]);
const tableList = async()=>{
  const data = await product(obj)
  if (data.code == 200) {
    dataList.value = data.data.data
    page.current_page = data.data.current_page
    page.per_page = data.data.per_page
    page.total = data.data.total
  }
}
defineExpose({
  productDialog,tableList
});
</script>

<style lang='less'  scoped>

.box{
  :deep(.el-dialog__body){
  padding:0 20px!important;
  }
  :deep(.el-dialog__footer){
    padding: 0 !important;

  }
  :deep(.tableflex[data-v-0985d712]){
    margin-top: 15px;
  }
}

</style>